<!DOCTYPE html>
<th:block xmlns:th="https://www.thymeleaf.org"
          th:insert="~{common/layout :: layout (showTitle = ${#messages.msg('page.tags.browser.title', site.title)}, canonical = @{/tags}, content = ~{::content}, isPost = false)}">
  <th:block th:fragment="content"
            th:with="isEmpty = ${#lists.isEmpty(tags)}, enableTagsColor = ${theme.config.page_config.enable_tags_tag_color}">
    <div th:if="${isEmpty}" class="card card-empty" th:with="title=#{global.route.back.home.name},
            linkHtml='&lt;a href=&quot;/&quot; aria-label=&quot;' + ${title} + '&quot; title=&quot;' + ${title} + '&quot;&gt;' + ${title} + '&lt;/a&gt;',
            finalMessage=${#messages.msg('page.tags.empty.tip', linkHtml)}">
      <i class="ri-inbox-2-fill"></i>
      [(${finalMessage})]
    </div>
    <th:block th:unless="${isEmpty}">
      <div class="card card-content">
        <div class="card-tab">
          <div>[[#{page.tags.title}]]</div>
        </div>
        <div class="tags-field">
          <a th:each="tag : ${tags}" class="tags" th:href="${tag.status.permalink}" th:aria-label="${tag.spec.displayName}" th:title="${tag.spec.displayName}">
          <span class="tag" th:text="${tag.spec.displayName}"
                th:style="${(enableTagsColor && tag.spec.color != '#ffffff')? 'color: ' + tag.spec.color +'; background: ' + tag.spec.color +'20' : ''}"></span>
            <span class="tag is-grey" th:text="${tag.postCount == null ? 0 : tag.postCount}"
                  th:style="${(enableTagsColor && tag.spec.color != '#ffffff')? 'background: ' + tag.spec.color +'CC' : ''}"></span>
          </a>
        </div>
      </div>
    </th:block>
  </th:block>
</th:block>